<template>
	<view>
		<cu-custom  bgColor="bg-gradual-pink" :isPlace="true" v-if="!_isWidescreen&&modalName!='friend-circle'"><block slot="content">{{title}}</block>
			
		
		</cu-custom>
		
		<view class="page " :class="[modalName=='message'?'show':'',_isWidescreen?' left-window-index-width':'']" v-if="modalName=='message'">
			<messages></messages>
		</view>
		<view class="page " :class="[modalName=='friend'?'show':'',_isWidescreen?' left-window-index-width':'']" v-if="modalName=='friend'">
			<friend-page></friend-page>
		</view>
		<view class="page " :class="[modalName=='my'?'show':'',_isWidescreen?' left-window-index-width':'']" v-if="modalName=='my'">
			<my-page></my-page>
		</view>
		<view class="page"  :class="[modalName=='friend-circle'?'show':'',_isWidescreen?' left-window-index-width':'']" v-if="modalName=='friend-circle'">
			<friend-circle-page @friendCircleDisplay="friend_circle_display='friend-circle-publish'" v-if="friend_circle_display=='friend-circle-page'"></friend-circle-page>
			<friend-circle-publish @friendCircleDisplay="friend_circle_display='friend-circle-page'" v-if="friend_circle_display=='friend-circle-publish'"></friend-circle-publish>
		</view>
		<view class="cu-bar tabbar bg-white " style="" :class="[_isWidescreen?'foot left-window-index-width':'foot']" >
			<view class="action text-green" :class="{'text-gray':modalName!='message'}">
				<view class="cuIcon-message "   data-target="message" @tap="showModal">
					<view class="cu-tag badge" v-if="unread_count"></view>
					<view class="cu-tag badge" v-if="unread_count!=0">
						<block>{{unread_count>99?'99+':unread_count}}</block>
					</view>
				</view>
				<view  class="" >消息</view>
			</view>
			<view class="action text-green":class="{'text-gray':modalName!='friend'}" data-target="friend" @tap="showModal">
				<view class="cuIcon-group " >
				</view>
				<view class="" >好友</view>
			</view>
			<view class="action text-green":class="{'text-gray':modalName!='friend-circle'}" data-target="friend-circle" @tap="showModal">
				<view class="cuIcon-post " >
				</view>
				<view class="" >朋友圈</view>
			</view>
			<view class="action text-green" :class="{'text-gray':modalName!='my'}" data-target="my" @tap="showModal">
				<view class="cuIcon-my">
				</view>
				<view class="" >我的</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import app from '@/mixins/app'
	import im from '@/mixins/im.js'
	import random_chat from '@/mixins/random_chat.js'
	export default {
		data() {
			return {
				modalName: 'message',
				// modalName: 'friend-circle',
				listTouchStart: 0,
				listTouchDirection: null,
				_isWidescreen:false,
				
				friend_circle_display:'friend-circle-page',//默认显示朋友圈
			}
		},

		onPullDownRefresh() {
		    console.log('refresh');
			
			if(this.modalName=='friend-circle'){
				if(this.friend_circle_display=='friend-circle-page'){//朋友圈页面下拉刷新
					this.toEmit('friend-circle-page-pull-down-refresh')
				}
			}else{
				uni.stopPullDownRefresh();
			}
			
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 5000);
		},
		onReachBottom(){
			console.log('触底了llll')
			if(this.modalName=='friend-circle'){
				if(this.friend_circle_display=='friend-circle-page'){//朋友圈页面上拉刷新
					this.toEmit('friend-circle-page-up-down-refresh')
				}
			}else{
			}
		},
		mixins:[app,im,random_chat],
		computed:{
			title(){
				if(this.modalName=='message'){
					return '消息'
				}else if(this.modalName=='friend'){
					return '好友'
				}else if(this.modalName=='my'){
					return '我的'
				}else if(this.modalName=='friend-circle'){
					return '朋友圈'
				}
			}
		},
		methods:{
			modal_name(name){
				this.modalName = name
			}
		},

		onLoad(option) {
			uni.$on('logout',this.logout)
			uni.$on('login',this.login)
			console.log('homehome')
			uni.$on('modal_name',this.modal_name)//字页面控制主页面显示哪个 
			this.connectWbsocket()
			if(this.hasLogin){
				this.$store.dispatch('im/getLatestMessages')
			}
		},
		onUnload() {
			clearInterval(this.im_timer)
			uni.closeSocket();
			uni.$off('logout',this.logout)
			uni.$off('login',this.login)
			uni.$off('modal_name',this.modal_name)
		},
		onShow(){
			this.needLogin()
		},
	}
</script>

<style>
.page{
	/* max-height: 100vh; */
	/* overflow-y: auto; */
}
</style>
